<template>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <h1 class="text-3xl font-bold text-[#333333] mb-8">编程式导航测试</h1>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- 基本导航测试 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">基本导航</h2>
        <div class="space-y-4">
          <button 
            @click="goToHome" 
            class="px-4 py-2 bg-[#F05454] text-white rounded hover:bg-[#c32a31] transition-colors"
          >
            返回首页
          </button>
          
          <button 
            @click="goToContent" 
            class="px-4 py-2 bg-[#F05454] text-white rounded hover:bg-[#c32a31] transition-colors"
          >
            前往内容页
          </button>
        </div>
      </div>
      
      <!-- 带参数的导航测试 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">带参数的导航</h2>
        <div class="mb-4">
          <label class="block text-gray-700 mb-2">新闻ID:</label>
          <input 
            v-model="newsId" 
            type="text" 
            class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#F05454]"
            placeholder="输入新闻ID"
          />
        </div>
        <button 
          @click="goToNewsDetail" 
          class="px-4 py-2 bg-[#F05454] text-white rounded hover:bg-[#c32a31] transition-colors"
        >
          查看新闻详情
        </button>
      </div>
      
      <!-- 历史导航测试 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">历史导航</h2>
        <div class="space-x-4">
          <button 
            @click="goBack" 
            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors"
          >
            返回上一页
          </button>
          
          <button 
            @click="goForward" 
            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition-colors"
          >
            前进一页
          </button>
        </div>
      </div>
      
      <!-- 替换导航测试 -->
      <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-xl font-semibold mb-4">替换当前历史记录</h2>
        <p class="text-gray-600 mb-4">点击下面的按钮将替换当前历史记录，而不是添加新记录</p>
        <button 
          @click="replaceWithHome" 
          class="px-4 py-2 bg-[#F05454] text-white rounded hover:bg-[#c32a31] transition-colors"
        >
          替换为首页
        </button>
      </div>
    </div>
    
    <!-- 导航状态信息 -->
    <div class="mt-8 bg-gray-100 p-6 rounded-lg">
      <h2 class="text-xl font-semibold mb-4">当前路由信息</h2>
      <div class="space-y-2">
        <p><strong>路径:</strong> {{ route.path }}</p>
        <p><strong>名称:</strong> {{ route.name }}</p>
        <p><strong>完整路径:</strong> {{ route.fullPath }}</p>
        <p><strong>查询参数:</strong> {{ JSON.stringify(route.query) }}</p>
      </div>
    </div>
    
    <!-- 导航日志 -->
    <div class="mt-8 bg-gray-100 p-6 rounded-lg">
      <h2 class="text-xl font-semibold mb-4">导航日志</h2>
      <div class="max-h-40 overflow-y-auto bg-white p-4 rounded border">
        <div v-for="(log, index) in navigationLogs" :key="index" class="py-1 border-b last:border-b-0">
          {{ log }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

// 获取路由实例和当前路由
const router = useRouter();
const route = useRoute();

// 状态
const newsId = ref('96806'); // 默认新闻ID
const navigationLogs = ref([
  '页面加载完成'
]);

// 添加日志的辅助函数
const addLog = (message) => {
  navigationLogs.value.push(`${new Date().toLocaleTimeString()}: ${message}`);
};

// 基本导航方法
const goToHome = () => {
  addLog('导航到首页');
  router.push({ name: 'HomePage' });
};

const goToContent = () => {
  addLog('导航到内容页');
  router.push({ name: 'ContentPage' });
};

// 带参数的导航
const goToNewsDetail = () => {
  if (!newsId.value) {
    addLog('错误: 新闻ID不能为空');
    return;
  }
  
  addLog(`导航到新闻详情页，ID: ${newsId.value}`);
  router.push({ 
    name: 'NewsDetail', 
    query: { id: newsId.value } 
  });
};

// 历史导航
const goBack = () => {
  addLog('返回上一页');
  router.back();
};

const goForward = () => {
  addLog('前进一页');
  router.forward();
};

// 替换导航
const replaceWithHome = () => {
  addLog('替换当前历史记录为首页');
  router.replace({ name: 'HomePage' });
};
</script>

<style scoped>
/* 可以添加任何需要的样式 */
</style>
